<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通讯录</title>
    <link type="text/css" href="./css/tongxunlu.css" rel="stylesheet" >
</head>
<body>
<div class="box">
    <div class="one_box">
        <div class="one_box">
        <p>通讯录</p>
        <img src="img/搜索.png" alt="">
        <img src="img/加号.png" alt="" id="jiahao">
        </div>
    </div>
    <div class="two_box"  style="margin-top: 120px">
        <div class="top">
            <div class="top_1">
                <img src="img/通讯1.png" alt="" style="height: 90px;margin-top: 30px;margin-left: 20px">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">新的朋友</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
        </div>
        <hr style="width: 84%;float: right">
        <div class="midden">
            <div class="midden_1">
                <div class="top_1">
                    <img src="img/通讯2.png" alt="" style="height: 90px;margin-top: 30px;margin-left: 20px">
                </div>
                <div class="top_2">
                    <p style="font-family:华文楷体">仅聊天的朋友</p>
                </div>
                <div class="top_3">
                    <img src="img/右箭头.png" alt="">
                </div>
            </div>
            <hr style="width: 84%;float: right">
            <div class="midden_2">
                <div class="top_1">
                    <img src="img/通讯3.png" alt="">
                </div>
                <div class="top_2">
                    <p style="font-family:华文楷体">群聊</p>
                </div>
                <div class="top_3">
                    <img src="img/右箭头.png" alt="">
                </div>
            </div>
        </div>
        <hr style="width: 84%;float: right">
        <div class="midden_3">
            <div class="top_1">
                <img src="img/通讯4.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">标签</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
        </div>
        <hr style="width: 84%;float: right">
        <div class="midden_4">
            <div class="top_1">
                <img src="img/通讯5.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">公众号</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
            <p class="wenzi">我的企业及企业联系人</p>
        </div>
        <div class="bottom">
            <div class="top_1">
                <img src="img/通讯6.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">企业微信联系人</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
            <p class="wenzi">A</p>
        </div>
        <div class="bottom">
            <div class="top_1">
                <img src="img/人物4.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">小默</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
            <p class="wenzi">B</p>
        </div>
        <div class="bottom">
            <div class="top_1">
                <img src="img/人物3.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">小七</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
            <p class="wenzi">C</p>
        </div>
        <div class="bottom">
            <div class="top_1">
                <img src="img/人物2.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">小美</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
            <p class="wenzi">B</p>
        </div>
        <div class="bottom"style="margin-bottom: 110px">
            <div class="top_1">
                <img src="img/人物1.png" alt="">
            </div>
            <div class="top_2">
                <p style="font-family:华文楷体">胖虎</p>
            </div>
            <div class="top_3">
                <img src="img/右箭头.png" alt="">
            </div>
            <p class="wenzi">D</p>
        </div>
    </div>
    <div class="three_box">
        <ul>
            <li>
                <a href="消息.html">
                    <img src="img/11.png" alt="">
                    <span>消息</span>
                </a>
            </li>
            <li>
                <a href="通讯录.html">
                    <img src="img/222.png" alt="" style="color: #3fc20c">
                    <span>通讯录</span>
                </a>
            </li>
            <li>
                <a href="发现.html">
                    <img src="img/33.png" alt="">
                    <span>发现</span>
                </a>
            </li>
            <li>
                <a href="我的.html" >
                    <img src="img/44.png" alt="">
                    <span>我</span>
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>